<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="{$article.intro}">
    <meta name="keywords" content="{$article.tag}">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{$article.title} - 苏州八百里官方博客</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="__Cssjs__/assets/i/favicon.png">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="__Cssjs__/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="__Cssjs__/assets/i/app-icon72x72@2x.png">
    <meta name="msapplication-TileImage" content="/blog/public/static/assets/i/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">
    <link rel="stylesheet" href="__Cssjs__/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="__Cssjs__/assets/css/app.css">
    <style>
        @media only screen and (min-width: 1200px) {
            .blog-g-fixed {
                max-width: 1200px;
            }
        }

        @media only screen and (min-width: 641px) {
            .blog-sidebar {
                font-size: 1.4rem;
            }
        }

        .blog-main {
            padding: 20px 0;
        }

        .blog-title {
            margin: 10px 0 20px 0;
        }



        .blog-meta  {
            color: #27ae60;
        }

        .blog-more  {
            color: blue;
        }

        .blog-pagination a {
            font-size: 1.4rem;
        }

        .blog-team li {
            padding: 4px;
        }

        .blog-team img {
            margin-bottom: 0;
        }

        .blog-content img,
        .blog-team img {
            max-width: 100%;
            height: auto;
        }

        .blog-footer {
            padding: 10px 0;
            text-align: center;
        }
    </style>
</head>
<body id="blog">
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，本网站暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
    或者使用火狐/谷歌第三方浏览器，以获得更好的体验！</p>
<![endif]-->
<!-- banner start -->
{include file="public/banner"}
<!-- banner end -->
<hr>
<!-- content srart -->
<div class="am-g am-g-fixed blog-fixed blog-content">
    <div class="am-u-md-8 am-u-sm-12">
        <article class="am-article blog-article-p">
            <div class="am-article-hd">
                <h1 class="am-article-title blog-text-center">{$article.title}</h1>
                <p class="am-article-meta blog-text-center">
                    <!--<span><a href="#" class="blog-color">{$article.tag} &nbsp;</a></span>-->
                    <span><a href="#">发布者：{$article.username}，</a></span>
                    <span><a href="#">{$article.publictime}&nbsp;上传，</a></span>
                    <span><a href="#">阅读量：<span style="color: red;">{$article.pv}</span> &nbsp;</a></span>
                </p>
            </div>
            <hr>
            <div class="am-article-bd">
                {$article.content}
            </div>
        </article>
        <hr>
        <div id="reply">
        </div>
        <ul class="am-pagination am-pagination-right" id="pagebanner">
        </ul>
        <!--
        <ul class="am-pagination blog-article-margin">
            <li class="am-pagination-prev"><a href="#" class="">&laquo; 一切的回顾</a></li>
            <li class="am-pagination-next"><a href="">不远的未来 &raquo;</a></li>
        </ul>
        -->
        <hr>
        <form class="am-form am-g" id="reply-val" autocomplete="off">
            <h3 class="blog-comment">&nbsp;&nbsp;&nbsp;&nbsp;发表评论</h3>
            <fieldset>
                <div class="am-form-group am-u-sm-4 blog-clear-left">
                    <input type="text" class="" minlength="3" maxlength="10" placeholder="姓名（必填，3-10字符）" id="name" required/>
                </div>
                <div class="am-form-group am-u-sm-4">
                    <input type="email" class="" placeholder="邮箱（必填）" id="email" required/>
                </div>

                <div class="am-form-group am-u-sm-4 blog-clear-right">
                    <input type="text" class="" placeholder="站点" id="site">
                </div>
                <div class="am-form-group">
                    <textarea class="" rows="5" minlength="3" placeholder="评论内容（必填，至少3字符）" id="content" required/></textarea>
                </div>
                <p><button type="button" onclick="post()" class="am-btn am-btn-default">发表评论</button></p>
            </fieldset>
        </form>
        <hr>
    </div>
    <!-- 右侧栏开始 -->
    {include file="public/right"}
    <!-- 右侧栏结束 -->
</div>
<!-- content end -->

<!-- footer start -->
{include file="public/footer"}
<!-- footer end -->
<script type="text/javascript">
    var m_id=getUrlParam('id');
    function setpage(page) {
        $.ajax({
            url:"/home/read/page",
            type:"post",
            dataType:"json",
            data:{"m_id":m_id,"p":page},
            success:function (data) {
                if(data.count==0){
                    $("#reply").html("<span style='color: red'>暂无评论，快来发表第一个评论吧！</span>");
                }else {
                    $("#pagebanner").empty();
                    $("#reply").empty();
                    $("#reply").append("<h3 class='blog-comment'>最新评论（<span style='color: red'>"+data.count+"</span>&nbsp;条）</h3>")
                    $("#pagebanner").append(data.banner);
                    $.each(data.list,function () {
                        $("#reply").append("<br><article class='am-comment'><img src='http://www.gravatar.com/avatar/1ecedeede84abbf371b9d8d656bb4265?d=mm&s=96' alt='' class='am-comment-avatar' width='48' height='48'/><div class='am-comment-main'> <header class='am-comment-hd'><div class='am-comment-meta'><span class='blog-meta'>"+this.name+"</span>&nbsp;评论于&nbsp;<span class='blog-meta'>"+this.time+"</span></div></header><div class='am-comment-bd'>"+this.content+"</div></div></article><br>");
                    });
                    if (page>1) {
                        $("html,body").animate({scrollTop: $("#reply").offset().top}, 10)
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert("Ajax错误！" + jqXHR.status);
            }
        })
    }
    function post() {
        var temp=$("#vali_false").is(":visible");
        if ($("#vali_false").length>0 && temp==true){
            AMUI.dialog.alert({
                title:'错误',
                content:'请先完成验证！',
                onConfirm: function() {
                    console.log('close');
                }
            });
        }else {
            var name=$("#name").val();
            var email=$("#email").val();
            var site=$("#site").val();
            var content=$("#content").val();
            $.ajax({
                url:"/home/reply",
                type:"post",
                dataType:"json",
                data:{"name":name,"email":email,"site":site,"content":content,"m_id":m_id},
                success:function (data) {
                    if(data=='success'){
                        AMUI.dialog.alert({
                            content:'发表成功！',
                            onConfirm: function() {
                                console.log('close');
                                window.location.reload();
                            }
                        });
                    }else {
                        AMUI.dialog.alert({
                            title:'错误',
                            content:data,
                            onConfirm: function() {
                                console.log('close');
                            }
                        });
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("Ajax错误！" + jqXHR.status);
                }
            })
        }
    }
    //获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null)
            return unescape(r[2]);
        return null; //返回参数值
    }

    function validate() {
        $('#reply-val').validator({
            onValid: function(validity) {
                $(validity.field).closest('.am-form-group').find('.am-alert').hide();
            },
            onInValid: function(validity) {
                var $field = $(validity.field);
                var $group = $field.closest('.am-form-group');
                var $alert = $group.find('.am-alert');
                // 使用自定义的提示信息 或 插件内置的提示信息
                var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
                if (!$alert.length) {
                    $alert = $('<div class="am-alert am-alert-danger" id="vali_false"></div>').hide().
                    appendTo($group);
                }
                $alert.html(msg).show();
            }
        });
    }
</script>


<!--[if (gte IE 9)|!(IE)]><!-->
<script src="__Cssjs__/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="__Cssjs__/assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="__Cssjs__/assets/js/amazeui.min.js"></script>
<script src="__Cssjs__/assets/js/amazeui.dialog.min.js"></script>
<!-- <script src="assets/js/app.js"></script> -->
<script type="text/javascript">
    $(function () {
        setpage();
        validate();
    });
</script>
</body>
</html>